<template>
  <div class="KnowledgeBaseDetail" style="height: 100%;">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/EmergencyResponselist' }">响应命令</el-breadcrumb-item>
        <el-breadcrumb-item>详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main">
      <div class="title">
        <p>响应命令单反馈详情</p>
        <el-button plain size="small" @click="back" class="back">返回</el-button>
      </div>
      <LsdDialogTitle slot="dialog" :titleConfig="titleConfig" :activeNames="activeNames">
        <el-form slot="slot1" ref="form" :model="form" label-width="160px">
          <el-form-item label="响应命令单：">
            {{ DetailList.zxdwName }}
          </el-form-item>
          <el-form-item label="响应研判单：">
            {{ DetailList.zxdwName }}
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="事件类别：">
                {{DetailList.zxdwName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="响应级别：">
                {{ DetailList.zxdwName }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="影响范围：">
                {{ DetailList.zxdwName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="影响时间：">
                {{ DetailList.zxdwName }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="事件概要：">
            {{ DetailList.zxdwName }}
          </el-form-item>

        </el-form>
        <el-form slot="slot2" ref="form" :model="form" label-width="160px" >
          <el-row>
            <el-col :span="12">
              <el-form-item label="执行单位：">
                {{DetailList.zxdwName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="部门/班组：">
                {{ DetailList.bmbzName }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="专业：">
                {{ DetailList.zyName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务负责人：">
                {{ DetailList.rwfzr }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="任务开始时间：">
                {{ DetailList.rwkssj }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务结束时间：">
                {{ DetailList.rwjssj }}
              </el-form-item>
            </el-col>
          </el-row>
         <el-form-item label="任务地点：">
            {{ DetailList.rwdd }}
          </el-form-item>
         <el-form-item label="成员：">
            {{ DetailList.cyNames }}
          </el-form-item>
         <el-form-item label="情况描述：">
            {{ DetailList.qkms }}
          </el-form-item>
        </el-form>
          <el-form slot="slot3" ref="form" :model="form" label-width="160px" inline>
          <el-row>
            <el-form-item label="附件信息：">
              <!-- :src="path" v-if="path"-->
              <img  alt="" class="fengmian" id="fjIds" >
          </el-form-item>
          </el-row>
        </el-form>
      </LsdDialogTitle>
    </div>
  </div>
</template>

<script>
import { doGetById } from "@/api/EmergencyDisposal/xymld";

export default {
  data() {
    return {
      titleConfig: [
        {
          title: "基本信息",
          name: "1",
          slot: "slot1"
        },
        {
          title: "反馈信息",
          name: "2",
          slot: "slot2"
        },
        {
          title: "附件信息",
          name: "3",
          slot: "slot3"
        }
      ],
      activeNames: ["1", "2", "3"],
      form: {},
      DetailList: []
    };
  },
  mounted() {
    this.getById();
  },
  methods: {
    back() {
      this.$router.back();
    },
    async getById() {
      const res = await doGetById({id: this.$route.query.id});
      console.log(res, "res------");
      this.DetailList = res;
    }

  }
};
</script>

<style lang='less' scoped>
@import "../../../../assets/style/common.less";
@import "../../../../assets/style/ComponentStyle.less";
@import "../../../../assets/style/pop-upNotification.less";

:deep(.el-form-item) {
  margin-bottom: 22px;

  .el-form-item__label {
    color: #303133;
  }
}

:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
}

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
}

:deep(.el-descriptions-item__label:not(.is-bordered-label)) {
  margin-right: 5px;
}

.main {
  height: 100%;
  border-radius: 4px;
  padding: 10px 60px;
  background-color: #fff;
  margin-top: 10px;
  box-sizing: border-box;
  overflow-y: auto;

  .title {
    position: relative;
    text-align: center;
    font-size: 28px;
    color: #303133;
    padding: 20px 0;

    .back {
      position: absolute;
      top: 80px;
      right: 20px;
      padding: 9px 18px;
    }
  }

  :deep(.el-descriptions) {
    font-size: 16px;
  }

  :deep(.desc-label) {
    min-width: 140px;
    justify-content: flex-end;
  }

  :deep(.el-form-item__label),
  :deep(.el-form-item__content) {
    font-size: 16px;
  }

  .link {
    text-decoration: underline;
    color: #3270ff;
    cursor: pointer;
  }

  .fengmian {
    width: 78px;
    height: 78px;
    object-fit: cover;
    vertical-align: middle;
  }
}
</style>
